import '../assets/font/index'
import '../assets/font/ojjingjian.min.js'
import '../assets/font/aliOjIcon.min.js'
import App from './App.vue'
import router from './router'
import store from '../ojSass/store'
import ElementPlus, { ElMessage } from 'element-plus'
import '../assets/icon.js'
import '../assets/css/index.css'
import 'element-plus/dist/index.css'
import { Storekey } from '../interface'
import '../components/userWorker'
import 'highlight.js/styles/default.css'
import { createApp } from 'vue'
import highlight from 'highlight.js'
// 引入 echarts
import ECharts from 'vue-echarts'
// 导入 ECharts 核心组件和渲染器
import * as echarts from 'echarts/core';
import { CanvasRenderer } from 'echarts/renderers';
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
// 导入需要的图例
import { LineChart, BarChart, PieChart } from 'echarts/charts';
import {
    TitleComponent,
    TooltipComponent,
    GridComponent,
    DatasetComponent,
    LegendComponent, DataZoomComponent
} from 'echarts/components';

// 注册必要的组件
echarts.use([
    CanvasRenderer, TitleComponent, TooltipComponent, GridComponent, DatasetComponent, LegendComponent, DataZoomComponent,
    LineChart, BarChart, PieChart
]);

const app = createApp(App)
// 使用 Highlight.js 高亮代码块
const highlightDirective = {
    mounted(el: HTMLElement) {
      const blocks = el.querySelectorAll<HTMLElement>('pre code');
      blocks.forEach((block: HTMLElement) => {
        highlight.highlightElement(block);
      });
    },
    updated(el: HTMLElement) {
      const blocks = el.querySelectorAll<HTMLElement>('pre code');
      blocks.forEach((block: HTMLElement) => {
        // 移除 data-highlighted 属性以清除先前的高亮状态
        block.removeAttribute('data-highlighted');
        highlight.highlightElement(block);
      });
    }
  };
  
// 针对 wheel 事件的，说明浏览器检测到非被动的 wheel 事件监听器。我们可以使用类似的方法来劫持所有的 addEventListener 调用，确保所有 wheel 和 mousewheel 事件监听器都是被动的。
// (function() {
//   const originalAddEventListener = EventTarget.prototype.addEventListener;
//   EventTarget.prototype.addEventListener = function(type, listener, options) {
//     if (type === 'wheel' || type === 'mousewheel') {
//       if (typeof options === 'boolean') {
//         options = { capture: options, passive: true };
//       } else if (typeof options === 'object') {
//         options = { ...options, passive: true };
//       } else {
//         options = { passive: true };
//       }
//     }
//     originalAddEventListener.call(this, type, listener, options);
//   };
// })();
  
app.directive('highlight', highlightDirective);
app.use(ElementPlus)
app.use(store, Storekey)
app.use(router)
app.mount('#app')

// 全局注册组件（也可以使用局部注册）
app.component('v-chart', ECharts)

for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
    app.component(key, component)
}
